<template>
    <div>
        <el-button type="primary" style="margin-left: 1250px" @click="addCourseForm()">添加课程</el-button>
        <div id="courseCardDiv">
            <el-row style="padding:20px">
                <el-col :span="4" v-for="item in courseList" :key="item.id" :offset="1">
                    <el-card  @click.native="toCourse(item.id)" shadow="hover"
                             :body-style="{ padding: '20px',height: '180px' }">
                        <el-image style="width: 170px;height: 130px;" :src="item.background" class="image"></el-image>
                            <p style="">{{item.courseName}}</p>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!--添加课程弹窗-->
        <el-dialog width="400px" title="添加课程" :visible.sync="addCourseFormVisible">
            <el-form>
                <el-form-item label="课程名">
                    <el-input v-model="addCourseFormData.courseName"></el-input>
                </el-form-item>
                <el-form-item label="课程封面">
                    <el-upload
                            class="upload-demo"
                            drag
                            name="file"
                            action="http://localhost:8080/course/uploadBackground"
                            :on-success="backgroundUploadSuccess">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: center" class="dialog-footer">
                <el-button @click="addCourseFormSubmit" type="primary">确 定</el-button>
                <el-button @click="addCourseFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        mounted: function () {

            this.axios.get(this.urls.getCourseList + "/" + sessionStorage.getItem("userId"))
                .then((res) => {
                    this.courseList = res.data.data;
                })
        },
        data() {
            return {
                courseList: "",
                fileUrl: "",
                addCourseFormData: {
                    userId: "",
                    courseName: "",
                    background: "",
                    description: ""
                },
                addCourseFormVisible: false,
            }
        },
        methods: {
            addCourseForm() {
                this.addCourseFormVisible = true;
            },
            addCourseFormSubmit() {
                this.addCourseFormData.userId = sessionStorage.getItem("userId");
                this.axios.post(this.urls.addCourse, this.addCourseFormData)
                    .then((res) => {
                        if (res.data.code === 200) {
                            this.$message.success("添加成功")
                            this.addCourseFormVisible = false;
                            this.reload();
                        }

                    })
            },
            toCourse(courseId) {
                this.$router.push({
                    name: "course",
                    query: {
                        courseId: courseId
                    }
                })
            },
            backgroundUploadSuccess(response) {
                console.log(response.data)
                this.addCourseFormData.background = response.data;
            }
        }
    }
</script>

<style>

</style>